<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/axios.js"></script>
    <script>
      /*   请求报文头(请求头)自定义属性参数：
            前后端分离开发的出现，分离开发必然出现连接调试时候会出现跨域请求问题
            在http安全需求的限制范围下，常规登录权限校验功能（cookie、session）
            在安全的前提条件下需要一个可以保证安全的同时，实现类似于cookie、session授权校验功能
            构建类似于session功能的加密状态记录数据(token) */

            // "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MTAwLCJ1c2VybmFtZSI6InRvbSIsImlhdCI6MTY2OTY5NDI3OSwiZXhwIjoxNjY5Njk3ODc5fQ.3HTMUzcQYjMKM2tsljNB6TThoSudDmaH9cCH42_GNu8"
       /*  授权请求-需要在请求发送时候手动携带授权字段
            方式1：cookie
            方式2：请求参数->将token直接作为参数进行发送
                          ->get请求，token会出现在url地址上
                          ->post请求

            方式3:自定义授权请求头(Authorization),取值=>"Bearer token字符串"
                    ->服务器返回的结果token已增加的"Bearer "值
                    ->服务器返回的结果token没有加"Bearer "值 */

        function doLogin(){
            axios({
                url:"http://127.0.0.1:3000/test/login",
                method:"get"
            }).then(function(res){
                console.log(res);
                sessionStorage.setItem("token",res.data.token);
            });
        }

        function sendUser(){
            axios({
                url:"http://127.0.0.1:3000/user/",
                method:"get",
                headers:{
                    Authorization:sessionStorage.getItem("token")
                }
            }).then(function(res){
                console.log(res);
              
            });
        }
    </script>
</head>
<body>
    <input type="button" value="login" onclick="doLogin()">
    <input type="button" value="user" onclick="sendUser()">
</body>
</html>